<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
    * {
      padding: 0;
      margin: 0;
    }
    body {
      width: 900px;
    }
    div {
      display: inline-block;
    }
    .red {
      background-color: red;
      height: 210px;
      width: 400px;
      line-height: 140px;
    }
    .orange {
      background-color: orange;
      width: 100%;
      height: 50px;
    }
    .yellow {
      background-color: yellow;
      width: 100%;
      height: 50px;
    }
    .green {
      background-color: green;
      height: 210px;
      width: 400px;
      line-height: 140px;
    }
    </style>
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>
    <div class="red">
      <div class="orange" ></div>
      <br>
      <div class="yellow" ></div>
    </div>
  
    <div class="green">
      <a class="orange" href="#">archor1</a>
      <br>
      <a class="yellow" href="#">行高为2/3盒子高时，中间贯穿。上面一行占了2/3，当前行的行高高是2/3,父级盒子剩1/3，当前行高是剩余空间的2倍，所以只有一半内容在盒子内，所以此行被中间贯穿</a>
    </div>
    <br>
    line-height其实对行内块也有效果。<br>
    行内块的特性是：与同行文字下沿对齐。所以行内块没和文字一样居中
  </body>
</html>
